<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .main {
      width: 1200px;
      margin: 0 auto;
      border: 1px solid gray;
    }

    .header {
      padding: 20px;
      border: 1px solid blue;
    }

    .content {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid blue;
    }

    table,
    th,
    td {
      border: 1px solid blue;
      border-collapse: collapse;
    }

    table {
      width: 1120px;
    }
  </style>
</head>

<body>

  <div class="main">


    <div class="header">
      <label for="name">姓名</label>
      <input type="text" class="name" placeholder="请输入姓名" name="name" />
      <button class="btn_search">搜索</button>
      <a href="add.html">添加</a>
      <a href="add.html">添加-jQuery</a>
    </div>

    <div class="content">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话</th>
            <th>爱好</th>
            <th>地址</th>
            <th>备注</th>
            <th>日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
  <script>
    function initData (name) {
      //1 创建 XMLHttpRequest 对象
      let xhr = new XMLHttpRequest();
      //2 注册请求状态改变的回调函数
      xhr.onreadystatechange = function () {
        console.log(xhr.readyState);//请求状态0-4
        //5 判断请求状态为4
        if (xhr.readyState === 4) {
          //6 判断状态码
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            console.log(xhr.responseText);
            let arr = JSON.parse(xhr.responseText);
            return arr;
            // let str = ''
            // arr.forEach((stu, i) => {
            //   str += `
            //   <tr>
            //     <td>${i + 1}</td>
            //     <td>${stu.id}</td>
            //     <td>${stu.name}</td>
            //     <td>${stu.clazz}</td>
            //     <td>${stu.gender}</td>
            //     <td>${stu.age}</td>
            //     <td>${stu.tel}</td>
            //     <td>${stu.hobby}</td>
            //     <td>${stu.address}</td>
            //     <td>${stu.remark}</td>
            //     <td>${stu.date}</td>
            //     <td>
            //       <a href="update.html#${stu.id}">编辑</a>
            //       <a href="javascript:del(${stu.id})">删除</a>
            //     </td>
            //   </tr>
            // `
            // })
            // document.querySelector("tbody").innerHTML = str;
          }
        }
      }
      //3 打开链接
      if (name) {
        xhr.open("GET", "http://192.168.0.85:3008/api/student/getStudent?name=" + name)
      } else {
        xhr.open("GET", "http://192.168.0.85:3008/api/student/getStudent")
      }


      // 4 发送请求
      xhr.send();
    }
    let x = initData()
    console.log(x);


    document.querySelector('.btn_search').addEventListener('click', function () {
      let name = document.querySelector('.name').value;
      console.log(name);
      initData(name)

    })

    function del (id) {
      if (!confirm("是否删除")) {
        return;
      }
      //1 创建 XMLHttpRequest 对象
      let xhr = new XMLHttpRequest();

      //2 注册请求状态改变的回调函数
      xhr.onreadystatechange = function () {
        console.log(xhr.readyState);//请求状态0-4

        //6 判断请求状态为4
        if (xhr.readyState === 4) {
          //7 判断状态码
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            initData()
          }
        }
      }
      //3 打开链接, 设置请求方式和url
      xhr.open("POST", "http://192.168.0.85:3008/api/student/removeStudent");
      //4 设置请求数据为表单格式:
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      //5 发送请求, 添加请求数据
      xhr.send("id=" + id);

    }
  </script>
</body>

</html>